<template>
  <div id="helpDetails" class="app-container common-main-container scrollbar-no-width">
    <div style="position: relative;">
      <div ref="print" class="helpDetails-body">
        <h2>{{ helpDetails.title }}</h2>
        <div class="subDesc">
          <span class="color-primary">{{ helpDetails.categoryName }}</span>&nbsp;&nbsp;
          <span v-if="helpDetails.attachment" class="color-danger">文档末尾有{{ helpDetails.attachment.split(',').length }}个附件下载</span>&nbsp;&nbsp;
          {{ helpDetails.gmtCreated | formatDate(T.DATE_TIME_FMT) }}
        </div>
        <div v-html="helpDetails.content" />
        <div v-if="helpDetails.attachment" style="margin-top:20px">
          <file-item :files="helpDetails.attachment.split(',')" />
        </div>
      </div>
      <div class="print">
        <i class="el-icon-printer color-primary common-cursor" @click="printing" />
      </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import Print from '@/utils/print.js'
Vue.use(Print)
export default {
  data() {
    return {
      helpDetails: {}
    }
  },
  computed: {

  },
  created() {
    this.loadHelpDetails()
  },
  methods: {
    loadHelpDetails() {
      this.$store.dispatch('getHelpContentDetailsById', this.$route.params.id).then(res => {
        this.helpDetails = res
      }).catch((_) => {})
    },
    printing() {
      this.$print(this.$refs.print)
    }
  }
}
</script>
<style scoped lang="scss">
@page {
  size: auto A4 landscape;
  margin: 3mm;
}
.helpDetails-body{
    padding: 0 25px;
    h2{
        font-size: 1.6em;
        font-weight: bold;
        text-align: center;
        margin-top: 20px;
    }
    .subDesc{
        text-align: center;
        font-size: 1.4em;
        margin: 5px auto 10px;
    }
}
#helpDetails{
    width: 1000px;
    max-width: 1000px;
    margin: 0 auto;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    .print{
        text-align: right;
        position: absolute;
        top: 50px;
        left: 0px;
        right: 12px;
        i{
            font-size: 2.5em;
        }
    }
}

</style>
